<script setup>
// import { mapState, mapActions } from 'vuex';
// import menusCore from './menus-core';
import MenusTree from './menus-tree.vue';
import {isAppForm, isGroupForm, isMenuForm, isPermissionForm} from '../../../common/common';
import FormGroup from './form-group.vue';
import FormMenu from './form-menu.vue';
import FormApp from './form-app.vue';
import FormPermission from './form-permission.vue';
import {onMounted, reactive, toRefs} from "vue";

const props = defineProps({
  appId: {
    type: [Number, String],
    default: null
  }
})

const {
  tty,
  currentData,
  actionType
} = toRefs(reactive({
  tty: 1,
  currentData: {},
  actionType: 'view',     // createGroup | createMenu | edit | view
}))

onMounted(() => {
  // init()
})

const handleSelectMenu = (data) => {
  currentData.value = data;
}

const handleClickMenuBlank = () => {
  currentData.value = null;
}

const handleShowEdit = () => {
  if (!currentData.value) return;
  actionType.value = 'edit';
}

const handleCancelEdit = () => {
  actionType.value = 'view';
}

const handleSuccess = () => {

}

const handleCancel = () => {
  actionType.value = 'view';
}
</script>

<template>
  <div class="mb-wrap">
    <MenusTree
      :tty="tty"
      :app-id="appId"
      class="mb-tree"
      @select="handleSelectMenu"
      @click-blank="handleClickMenuBlank"
    />
    <div class="mb-info">
      <div class="actions">注意：如需新增/修改/删除，请在左侧菜单树中点击操作</div>
      <div class="info">
        <FormGroup
          v-if="isGroupForm(currentData, actionType)"
          :action-type="actionType"
          :current-data="currentData"
          :tty="tty"
          @success="handleSuccess"
          @cancel="handleCancel"
        />
        <FormPermission
          v-else-if="isPermissionForm(currentData, actionType)"
          :action-type="actionType"
          :current-data="currentData" :tty="tty"
          @success="handleSuccess"
          @cancel="handleCancel"
        />
        <FormMenu
          v-else-if="isMenuForm(currentData, actionType)"
          :action-type="actionType"
          :current-data="currentData"
          :tty="tty"
          @success="handleSuccess"
          @cancel="handleCancel"
        />
        <FormApp
          v-else-if="isAppForm(currentData, actionType)"
          :action-type="actionType"
          :current-data="currentData"
          :tty="tty"
          @success="handleSuccess"
          @cancel="handleCancel"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mb-wrap {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .mb-tree {
    width: 300px;
    border-right: 1px solid var(--j-border-color-extra-light);
    flex: none;
    padding-top: 0px;
    background:#FFF;
  }

  .mb-info {
    background: #FFF;

    .info {
      padding-top: 10px;
    }
  }
}

.actions {
  text-align: center;
  color: var(--j-color-warning);
}
</style>
